<template>
 <el-form ref="deptForm" label-width="120px" :model="form" :rules="rules" >
    <el-form-item label="部门名称" prop="name">
      <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门编码" prop="code">
      <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门负责人" prop="name">
      <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
        <el-option :value="item.username" :label="item.username" 
        v-for="item in list"
        :key="item.id"
        />
        
      </el-select>
    </el-form-item>
    <el-form-item label="部门介绍" prop="introduce">
      <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
      <el-button size="small" @click="hCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {departments} from "@/api/departments";
import {newDepartments ,idDepartments,aditDepartments} from "@/api/Organization";
export default {
  props:{
    id:{
      type:String,
      required:true
    },
    edit:{
      type:Boolean,
      required:true
    },
    check:{
      type:Array,
      required:true
    }
  },
    data() {
      // 部门编码效验完成
      const validatePass = (rule, value, callback) => {
       console.log(value);
       let add = this.check.map(item => item.code )
      if(this.edit){
        add = this.check.filter(item => item.id !==this.id).map(item=> item.code)
      }
       if(add.includes(value)){
        callback(new Error(`${value}重复`))
       }else{

         callback()
       }
      };

      // 部门名称效验完成
      const validateName = (rule, value, callback) => {
       console.log(value);
       let  ass = this.check.filter(item=>item.pid===this.id).map(item=>item.name)
      if (this.edit) {
        const pid = this.check.find(item =>item.pid==this.id).pid
        const  add = this.check.map(item => item.pid =pid)
        ass=add.filter(item=>item.pid !==this.id).map(item=>item.name)
      }

        if(ass.includes(value)){
        callback(new Error(`${value}重复`))
       }else{

         callback()
       }
      };

        return {
            list:[],
            form:{
                name:'',
                code:'',
                manager:'',
                introduce:'',
            },
            rules:{
              name:[
                { validator: validateName, trigger: 'blur' },
                { required: true, message: '请输入部门名称', trigger: 'blur' },
                { min: 1, max:10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
              ],
              code:[
                 { validator: validatePass, trigger: 'blur' },
                { required: true, message: '请输入部门编码', trigger: 'blur' },
                { min: 1, max:10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
              ],
              manager:[
                { required: true, message: '请输入部门负责人', trigger: 'changa' },
              ],
              introduce:[
                { required: true, message: '请输入部门介绍', trigger: 'blur' },
                { min: 1, max:300, message: '长度在 1 到 300 个字符', trigger: 'blur' }
              ],
            }
        };
    },
    created(){
        this.loadDepartments()
        if(this.edit){

          this.idLoadDepartments()
        }
    },
    methods:{
      // 重置表单
      resetForm(){
        this.$refs.deptForm.resetFields()
        this.form={
                name:'',
                code:'',
                manager:'',
                introduce:'',
            }
      },
      // 根据id编辑部门
      async loadAditDepartments(){
        try {
          const res = await aditDepartments(this.form)
          // console.log(res);
          this.$emit('apply');
        } catch (error) {
          console.log(error);
        }
      },
      // 根据id获取部门信息
      async idLoadDepartments(){
        try {
          const  res = await idDepartments(this.id)
          // console.log(res);
           this.form=res.data
        } catch (error) {
          console.log(error);
        }
      },
      // 新增员工
    async  loadNewDepartments(){
        try {
          const  res = await newDepartments({pid:this.id,...this.form})
          // console.log(res);
          this.$emit('apply');
        } catch (error) {
          console.log(error);
        }
      },
      // 获取员工简单列表
       async loadDepartments(){
        const res = await departments()
            // console.log(res);
        this.list =res.data
       },
        hSubmit(){

          this.$refs.deptForm.validate((valid)=>{
            if(!valid)  return
            this.edit?this.loadAditDepartments():this.loadNewDepartments()
          }) 
        },
        hCancel(){
          this.$emit('apply');
        }
    }
}
</script>

<style>

</style>